<template>
  <div class="icons">
    <swiper>
      <swiper-slide v-for="(page,index) in pages" :key="index">
          <div class="icon" v-for="item in page" :key="item.id">
            <div class="icon-img">
              <img class="icon-img-content" :src="item.imgURL"/>
            </div>
            <p class="icon-desc">{{item.desc}}</p>
          </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
  export default {
    name:'HomeIcons',
    data(){
      return{
        itemList:[
          {
            id:'0001',
            imgURL:'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/38cd7a459e6d92cc4d87629645ac81fb_78_59.jpg',
            desc:'001'
          },
          {
            id:'0002',
            imgURL:'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/38cd7a459e6d92cc4d87629645ac81fb_78_59.jpg',
            desc:'002'
          },
          {
            id:'0003',
            imgURL:'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/38cd7a459e6d92cc4d87629645ac81fb_78_59.jpg',
            desc:'001'
          },
          {
            id:'0004',
            imgURL:'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/38cd7a459e6d92cc4d87629645ac81fb_78_59.jpg',
            desc:'002'
          },
          {
            id:'0005',
            imgURL:'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/38cd7a459e6d92cc4d87629645ac81fb_78_59.jpg',
            desc:'001'
          },
          {
            id:'0006',
            imgURL:'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/38cd7a459e6d92cc4d87629645ac81fb_78_59.jpg',
            desc:'002'
          },
          {
            id:'0007',
            imgURL:'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/38cd7a459e6d92cc4d87629645ac81fb_78_59.jpg',
            desc:'001'
          },
          {
            id:'0008',
            imgURL:'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/38cd7a459e6d92cc4d87629645ac81fb_78_59.jpg',
            desc:'002'
          },
          {
            id:'0009',
            imgURL:'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/38cd7a459e6d92cc4d87629645ac81fb_78_59.jpg',
            desc:'001'
          },
          {
            id:'0010',
            imgURL:'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/38cd7a459e6d92cc4d87629645ac81fb_78_59.jpg',
            desc:'002'
          }
        ]
      }
    },
    computed: {
      pages (){
        const pages = []
        this.itemList.forEach((item,index)=>{
          const page = Math.floor(index/8)
          if (!pages[page]){
            pages[page]=[]
          }
          pages[page].push(item)
        })
        return pages
      }
    }
  }
</script>

<style lang="stylus" scoped>
.icons >>> .swiper-container
  overflow:hidden
  height:0
  padding-bottom: 50%
.icon
  position: relative
  overflow: hidden
  height:0
  float:left
  width:25%
  padding-bottom:25%
  /* background: green */
  .icon-img
    position: absolute
    top:0
    left:0
    right:0
    bottom:44px
    box-sizing:border-box
    padding:5px
    /* background: red */
    .icon-img-content
      display:block
      margin:0
      height:100%
  .icon-desc
    position: absolute
    left:0
    right:0
    bottom:0
    height:44px
    line-height:44px
    font-size:44px
    text-align:center
    color:#333
    /* background:blue */
</style>
